<template>
  <div class="rank">
    <!-- 排行榜页面 -->
    <div class="title">
      <p>热门景区排行</p>
      <img src="../../images/dataScreen-title.png" alt="图片地址已失效">
    </div>
    <div class="charts" ref="refForCharts"></div>
  </div>
</template>

<script lang="ts" setup name="Rank">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
let refForCharts = ref<HTMLDivElement>()
onMounted(() => {
  let instanceOfEcharts = echarts.init(refForCharts.value as HTMLDivElement)
  instanceOfEcharts.setOption({
    title: {
      text: '热门景区排行', // 主标题文本内容
      // 设置主标题的位置↓
      left: 'center',
      top: 20,
      textStyle: { // 主标题的样式
        color: '#fff',
        fontSize: 16
      },
      link: 'http://www.baidu.com', // 主标题的链接地址（注：此处的网址中一定要写协议，否则点击链接后会跳转到项目首页而非目标网址，下同）
      subtext: '数据来源：某某平台', // 副标题文本内容
      subtextStyle: { color: 'pink', fontSize: 16 }, // 副标题的样式
      sublink: 'http://www.qq.com', // 主标题的链接地址
    },
    xAxis: {
      type: 'category',
      data: ['景点1', '景点2', '景点3', '景点4', '景点5', '景点6', '景点7'],
    },
    yAxis: {},
    grid: {
      top: 20,
      left: 20,
      right: 20,
      bottom: 20,
    },
    series: [{
      type: 'bar',
      data: [10, 20, 30, 40, 50, 60, 70],
      label: {
        show: true,
        position: 'insideTop',
        color: '#fff',
      },
      showBackground: true,
      backgroundStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'black' // 0% 处的颜色
          }, {
            offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
      },
      itemStyle: {
        borderRadius: [10, 10, 0, 0], // 使柱状图头部圆滑处理
        color:function(data:any){
          console.log('柱子的颜色被设置了')
          console.log(data) // data就是与每个柱子对应的数据对象，对象中包含了color属性，可以直接修改color的值来改变柱子的颜色；对象中也包含了“dataIndex”属性，它被用来获取当前柱子的索引值（从0开始计数），可以通过它来为每个柱子设置不同的颜色
          console.log(data.value) // data.value 就是当前柱子的值（打印出data数组中的元素）
          // 为每一个柱子设置不同的颜色↓
          let anArrayThatStoresColors = ['red', 'orange', 'yellow', 'green', 'cyan','blue','purple']
          return anArrayThatStoresColors[data.dataIndex] // 通过data.dataIndex获取当前柱子的索引值，然后根据这个索引值从数组中取出对应的颜色值作为该柱子的颜色
        }
      }, // 柱子的样式
    },{
      type: 'line',
      data: [10, 20, 30, 40, 50, 60, 70],
      // smooth: true, // 让折线图显示平滑曲线的效果，默认为false（显示折线图）
    },],
    // 提示框组件↓
    tooltip:{
      // backgroundColor:'rgba(50,50,50,0.7)', // 提示框的背景颜色

    }
  })
})
</script>

<style lang="scss" scoped>
.rank {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;

  .title {
    margin-left: 5px;

    p {
      color: white;
      font-size: 20px;
    }
  }

  .charts {
    width: 100%;
    height: calc(100% - 30px);
  }
}
</style>